<template>
	<div class="xuan_school">
		<div class="header">
			   <!-- <van-nav-bar
				  title="订单"
				  style="background: #FFFFFF;"
				  @click-left="onClickLeft"
				 /> -->
		</div>
      <!--列表--->
    <van-tabs @click="onClick">
			  <van-tab v-for="(index,i) in tab_item" :title="index.name" :key="i" >
              <!-- 此处遍历数据-->
			    <div  id="list-content">
                <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                  <van-list
                    v-model="loading"
                    :finished="finished"
                    @load="onLoad"
                    finished-text="没有更多了"
                    :immediate-check="immediate"
                    :offset="10"
                  >
                  <div v-if="empty">
                  	 <img src="../../assets/nolist.png" class="Img_sre_contet"/>
	                  <p style="color:#CCCCCCFF;">
	                  	<span>您还没有上门回收订单哦～</span>

	                  </p>
                  </div>
                    <div v-if="empty1">
                      <img src="../../assets/nolist.png" class="Img_sre_contet"/>
                      <p style="color:#CCCCCCFF;">
                        <span>您还没有自主投递订单哦～</span>

                      </p>
                    </div>

                    <div class="Assen_action"
                    	style="padding: 3vh;"
                         v-for="(item, i) in items"
                         @click="Orderdetails"
                         :key="i"
                         v-if="!tem_content">
                        <div class="div_content_Assen">
                          <p class='p_content_con'>
                            <span style="color: #999999;">|</span>
                            <span class="child_list_item">{{item.device_name}}</span>
                          </p>
                          <p>
                              <span class="child_list_two">{{item.create_date | formatDate}}</span>
                          </p>
                        </div>
                        <div class="suliao_ping">
                           <p style="color: #999999;font-size: 14px;">{{item.divice_intype_name}}</p>
                           <p style="font-size: 14px;">
                            <span style="color: #999999;">{{item.quality}}</span>  {{item.inner_type}}</p>
                           <p>
                            <span style="color: #999999;font-size: 14px;">
                             		 获得积分：
                            </span>
                            <span style="font-size: 14px;">
                              {{item.sco}}
                            </span>
                           </p>
                        </div>
                      </div>

                    <div class="Assen_action"
                    	 @click="Orderdetails(item.aId)"
                         v-for="(item, i) in items"
                         :key="i"
                         v-if="tem_content">
                        <div>
                        	<div class="list_header">
                        		<p>
                        			{{item.update_date | formatDate}}
                        		</p>
                        		<p>
                        			<van-icon name="arrow" />
                        		</p>
                        	</div>

                        	<div class="list_bottom">
                        		<div>
                        			<span class="span_one">{{item.reservation_day | formatDate2}} {{item.reservation_time}}</span>
                        			<br />
                        			<span class="span_two">预约时间</span>
                        		</div>


                        		<div>
                        			<span class="span_one">{{item.status | formatStatus}}</span>
                        			<br />
                        			<span class="span_two">当前状态</span>
                        		</div>

                        		<div>
                        			<span class="span_one">{{item.practical_integral}}</span>
                        			<br />
                        			<span class="span_two">获得积分</span>
                        		</div>
                        	</div>
                        </div>
                    </div>
                  </van-list>
                </van-pull-refresh>
            </div>
			    </van-tab>
       </van-tabs>
    <ban-veriFy></ban-veriFy>
	</div>

</template>
<script>
    import {formatDate} from '../../utils/filters.js'
// require styles
import BanVeriFy from '@/components/BanVeriFy';

export default {
	  data(){
		  return{
			  tab_item:[{'name':'上门回收'},{'name':'自主投递'}],
        user:'',
        items:[],
        page:0,
        isLoading:false,
        loading: false,   //是否处于加载状态
        finished: false, //是否已加载完所有数据
        temp_event:0,
        immediate:false,
          tem_content:true,
          empty:false,
          empty1:false
		  }
	  },
    mounted(){
	      const that = this;
        let local_user = localStorage.getItem('user');
        if(local_user != undefined && local_user != "undefined"){
            let user = JSON.parse(local_user);
            this.user = user;
            //页面初始化的时候执行第一次上门回收方法
            that.temp_event =0;
            that.isLoading = true;
            that.page = 0;
            that.items=[];
            that.getrecovery_order(0);
        }else{
            that.empty=true;
        }



    },
    filters:{
        formatDate(time){
            var data = new Date(time);
            return formatDate(data,'yyyy-MM-dd hh:mm');
        },
        formatDate2(time){
            var data = new Date(time);
            return formatDate(data,'MM-dd');
        },
        formatStatus(status){

            if(status=='0' ){
                return "已下单"
            }else if(status=='1'){
                return "已抢单2"
            }else if(status=='2'){
                return "已成功回收"
            }else if(status=='3'){
                return "已拒绝回收"
            }
            return "";
        },


    },
	methods: {
		//订单详情
		Orderdetails(id){
			this.$router.push({
				path:'/orderdelite',
          query:{orderId:id}
			})

		},
      onClick(event) {
          const  that = this;
          that.empty1=false;
          that.empty=false;
          if(event == 0){

              if(that.user != null && that.user !=''){
                  that.tem_content = true;
                  that.temp_event =0;
                  that.isLoading = true;
                  that.page = 0;
                  that.items=[];
                  that.getrecovery_order(0);
              }else{
                  that.empty1=false;
                  that.empty=true;
              }
          }else if(event == 1){

              if(that.user != null && that.user !=''){
                  that.tem_content = false;
                  that.temp_event =1;
                  that.isLoading = true;
                  that.page = 0;
                  that.items=[];
                  that.getdeliver_order(0);
              }else{
                  that.empty=false;
                  that.empty1=true;
              }

          }

      },
      //上门回收
      getrecovery_order(type){
          const that = this;
          that.$sendRequest('/RecoveryRelivery/getrecovery_order',"aId="+that.user.userId+"&page="+that.page).then(function(res){
              that.isLoading = false;
              that.loading = false;
              if(res.data.code ==0){
                  if(res.data.result.reservationOrders.length < 10){
                      that.finished = true;
                  }
                  for(var i = 0;i<res.data.result.reservationOrders.length;i++){
                      that.items.push(res.data.result.reservationOrders[i]);
                  }
                  if(type ==0){
                      that.finished = false;
                  }
                  if(that.items.length == 0){
                      that.empty = true;
                      that.empty1 = false;
                  }
              }

          })
      },
      getdeliver_order(type){
          const that = this;
          that.$sendRequest('/RecoveryRelivery/getdeliver_order',"aId="+that.user.userId+"&page="+that.page).then(function(res){
              console.log(res.data);
              that.isLoading = false;
              that.loading = false;
              if(res.data.code ==0){
                  if(res.data.result.DeliverOrders.length < 10){
                      that.finished = true;
                  }
                  for(var i = 0;i<res.data.result.DeliverOrders.length;i++){
                      that.items.push(res.data.result.DeliverOrders[i]);
                  }
                  if(type ==0){
                      that.finished = false;
                  }
                  if(that.items.length == 0){
                      that.empty1 = true;
                      that.empty = false;
                  }
              }

          })
      },

	       onClickLeft() {
	          this.$router.back(-1);
		    },
      onRefresh(){
          console.log("下拉刷新");
          const  that = this;
          that.isLoading = true;

          that.page = 0;
          that.items=[];
          if(that.temp_event ==0){
              that.getrecovery_order(0);
          }else if(that.temp_event ==1){
              that.getdeliver_order(0);
          }


      },
      onLoad() {
          console.log("上拉加载");
          console.log(this.finished);
          if(this.items.length != 0){
              this.page = this.page+1;
          }
          if(this.temp_event ==0){
              this.getrecovery_order(1);
          }else if(this.temp_event ==1){
              this.getdeliver_order(1);
          }


      }

		},
    components: {
        BanVeriFy

    }

    }
</script>
<style scoped="scoped">
	.xuan_school>>> .van-tabs__line{
		background-color: #4C9FFDFF;

	}
	.xuan_school >>> [class*=van-hairline]::after{
		border-bottom: 0 solid #FFFFFF;
	}
	.Img_sre_contet{
		margin-top: 14vh;
		width: 50%;
		height: 50%;
	}
	.list_header{
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1);
		line-height:1vh;
		padding: 3vw;
		height: 1vh;
		display: flex;
		font-size: 13px;
		justify-content: space-between;
		border-bottom: 1px solid #F6F6F6FF;
	}
	.list_bottom{
		display: flex;
		justify-content: space-between;
	}
	.list_bottom div{
		text-align: center;

	}
	.list_bottom div .span_one{
		font-size:13px;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
	}
	.list_bottom div .span_two{
		margin-top: 1vh;
		display: inline-block;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1);
		font-size: 13px;
	}
	.xuan_school .van-list{
		background: #F6F6F6FF !important;
	}
	.xuan_school{
		background: #F6F6F6FF !important;
	}
	.xuan_school >>> .van-list{
		background: #F6F6F6FF;
	}
	.list-content{
        margin-top:46px;
        overflow:scroll;
    }
    .list-item{
        text-align:center;
    }
    .child_list_item{
    	font-size: 15px;
    	vertical-align: middle;
    }
	.lun_bo{
		height: 24vh;
	}
	.header >>> .van-nav-bar__title{
		color: #000;
	}
	.lun_bo >>>.van-swipe{
		height: 100%;
	}
	.data_picker_color{
		color: #FF4242;
		font-size: 20px;
		margin-left: 2vh;
	}
	.child_list_two{
		color: #999999;
		font-size: 13px;
	}
	.uploader_img{
		margin-top: 2vh;
		display: flex;
		justify-content: space-between;
		margin: 12px;
	}
	/*.Assen_action{
		padding: 0;
		margin: 2vh;
		display: flex;
		justify-content: space-between;
	}*/
	.Assen_action{
		padding: 0;
		margin: 1.2vh;
	}
	.Assen_action img{
		width: 28vw;

	}
	.Assen_action .suliao_ping{
		display: flex;
		margin-top: 1.5vh;
		justify-content: space-between;

	}
	p{
		margin: 0;
		padding: 0;
	}
	.Assen_action
	.Assen_action p{
		text-align: center;
		text-align: left;
		margin: 0;
		padding: 0;
		font-size: 12px;
	}

	.div_content_Assen{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
.Assen_action .p_content_con{
	font-size: 15px;
	text-align: left;
 /* display: flex;*/
  /*justify-content: space-between;*/
	/*margin-top: 1.1vh;*/
}
.Assen_item_one img {
	margin-right: 2vw;
}
.p_Assion_july{

	color: #999999;
	margin-top: 0.5vh !important;
}

.xuan_school{
	background:rgb(246,246,246);
	height: 100vh;
}
.Assen_action{
	  /*padding-top: 3vh;*/
    background: #fff;
    /*padding-bottom: 3vh;*/
    padding-left: 2vw;
    padding-right: 2vw;
    border-radius: 1vh;
}
.list_bottom{
	padding: 3vh;
}
.Door_recy{
	height: 15vh;
	background: #FFFFFF;
	text-align: left;
	margin: 1.5vh;
	border-radius: 1vh;
}
.Door_recy_item_one{
	display: flex;
	margin: 2vh;
	height: 5vh;
	line-height: 5vh;
	/*border-bottom: 0.5px solid #999;*/
	justify-content: space-between;
	color: #999999;
	font-size: 13px;
	/*border-bottom: 0.5px solid #CCCCCC;*/
}

.end_content{
	display: flex;
	justify-content: space-around;
	font-size: 15px;

}
.end_time_content{
	display: flex;
	justify-content: space-between;
	color: #999999;
	margin-left: 2vh;
	margin-right: 2vh;


}
.end_time_content div{
	text-align: center;
}


p{
	margin: 0;
	padding: 0;
}

.time_content_iten_one p:nth-child(1){
	color: #000000;
}
.time_content_iten_one p:nth-child(2){
	font-size: 12px;
	margin-top: 1vh;

}
.xuan_school >>> .van-tabs__line {
    background: #4C9FFD;
}




 </style>
